<template>
  <div>
    <el-card>
      <div style="padding: 0 0 20px 0;">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>设备管理</el-breadcrumb-item>
          <el-breadcrumb-item>群控</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div>
        <el-form ref="form" label-width="80px" :inline="true">
          <el-form-item>
            <el-button type="primary" @click="add">添加分组</el-button>
          </el-form-item>
        </el-form>
      </div>

      <el-table :data="dataList" border>
        <el-table-column label="分组名称" prop="title"></el-table-column>
        <el-table-column label="状态" prop="state">
          <template slot-scope="scope">
            {{scope.row.state==1?'全开':(scope.row.state==2?'全关':'未操作')}}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" @click="openEdit(scope.row)"
              >编辑</el-button
            >
            <el-button type="danger" @click="del(scope.row)">删除</el-button>
            <el-button type="primary" @click="openDevices(scope.row)"
              >设备列表</el-button
            >
            <el-button type="primary" @click="openAll(scope.row)"
              >全开</el-button
            >
            <el-button type="danger" @click="closeAll(scope.row)"
              >全关</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        :total="total"
        :current-page="query.page"
        :page-size="10"
        @current-change="pageChange"
      ></el-pagination>
    </el-card>

    <el-dialog title="添加分组" :visible.sync="showAddGroup">
      <addgroup @success="addGroupSuccess" />
    </el-dialog>

    <el-dialog title="分组设备" :visible.sync="showDivices">
      <groupdevice :groupid="curGroupid" />
    </el-dialog>

    <el-dialog title="编辑分组" :visible.sync="showEdit">
      <editgroup :data="curGroup" @success="updateSuccess" />
    </el-dialog>
  </div>
</template>

<script>
import addgroup from './components/addgroup.vue';
import groupdevice from './components/groupdevice.vue';
import { page, allDevices, removeGroup,setState } from '@/api/equipment/group.js';
import { opendevicesoper } from '@/api/ws/cmdoper.js';
import editgroup from './components/editgroup.vue';
export default {
  components: {
    groupdevice,
    addgroup,
    editgroup,
  },
  data() {
    return {
      query: {
        page: 1,
      },
      total: 0,
      showAddGroup: false,
      showDivices: false,
      showEdit: false,
      dataList: [],

      curGroupid: '',
      curGroup: {},
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      page(this.query).then((res) => {
        console.log('获取一下用户信息', res);
        this.dataList = res.data.data;
        this.total = res.data.total;
      });
    },
    pageChange(page) {
      this.query.page = page;
    },
    add() {
      this.showAddGroup = true;
    },
    addGroupSuccess() {
      this.$message.success('添加分组成功');
      this.showAddGroup = false;
      this.getData();
    },
    openDevices(row) {
      this.showDivices = true;
      this.curGroupid = row.id;
    },
    openEdit(row) {
      this.showEdit = true;
      this.curGroup = row;
    },
    updateSuccess() {
      this.showEdit = false;
      this.$message.success('更新成功');
      this.getData();
    },
    del(row) {
      this.$confirm('您确定要删除分组【 ' + row.title + '】?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        removeGroup({ id: row.id }).then((res) => {          
           this.$message.success("删除成功")
           this.getData()
        });
      }).catch(()=>{

      });
    },
    openAll(row) {
      allDevices({ group_id: row.id }).then((res) => {
        console.log('所有的设备id', res.data);
        if (res.data.length > 0) {
          res.data.forEach((deviceid) => {
            //先用这个方法，后面要做一个更优化的方法
            opendevicesoper(deviceid, 'CMD-6', 1, 1);
          });
          this.$message.success('命令发送完成');
          setState({id:row.id,state:1}).then(r=>{
            this.getData()
          })
        } else {
          this.$message.error('该分组没有设备');
        }
      });
    },
    closeAll(row) {
      allDevices({ group_id: row.id }).then((res) => {
        console.log('所有的设备id', res.data);
        if (res.data.length > 0) {
          res.data.forEach((deviceid) => {
            //先用这个方法，后面要做一个更优化的方法
            opendevicesoper(deviceid, 'CMD-6', 0, 1);
          });
          this.$message.success('命令发送完成');
          setState({id:row.id,state:2}).then(r=>{
            this.getData()
          })
        } else {
          this.$message.error('该分组没有设备');
        }
      });
    },
  },
};
</script>

<style scoped></style>
